import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {Router, Route, Link} from 'react-router-dom';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

import ActionsNoLogin from './ActionsNoLogin';
import myMuiTheme from './MyMuiTheme';
import UserMenu from './UserMenu';
import history from './history'
import {CreateSurvey} from './survey';
import {AnswerRedirector,Answer} from './answer';
import {StatisticRedirector,Statistic} from './statistic';
// import Home from './Home';

// const Statistic = () => (
//     <h1>统计页面正在施工</h1>
// )

const Home = () => (
    <h1>调查问卷管理系统</h1>
)

class AppBarExampleIconButton extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            username: null,
            // username: 'kobako',
        }

        this.loginSuccess = this.loginSuccess.bind(this)
        this.logout = this.logout.bind(this)
    }

    loginSuccess(userInfo) {
        console.info('App :: loginSuccess() : ' + JSON.stringify(userInfo))
        this.user = userInfo
        this.setState({
            username: userInfo.name
        })

        window.myApp = this
    }

    logout(){
        console.log('退出登录')
        this.setState({
            username: null
        })
    }

    render() {
        return (
            <MuiThemeProvider muiTheme={myMuiTheme}>
                <Router history={history}>
                    <div>
                        <Toolbar>
                            <ToolbarGroup>
                                <ToolbarTitle style={{color: 'white'}} text={
                                    <Link to="/" style={{textDecoration: 'none',color: 'white'}}>调查问卷系统</Link>
                                }/>
                            </ToolbarGroup>
                            <ToolbarGroup lastChild={true}>
                                <AnswerRedirector fuck='yes'/>
                                <StatisticRedirector/>
                                {this.state.username
                                    ? <UserMenu logout={this.logout} name={this.state.username}/>
                                    : <ActionsNoLogin login={this.loginSuccess}/>
                                }
                            </ToolbarGroup>
                        </Toolbar>

                        <Route exact path="/" component={Home}/>
                        <Route path="/create-survey" component={CreateSurvey}/>
                        <Route path="/answer/:id" component={Answer}/>
                        <Route path="/statistic/:id" component={Statistic}/>
                    </div>
                </Router>
            </MuiThemeProvider>
        )
    }
}

export default AppBarExampleIconButton;